import React, { useEffect, useState } from 'react';
import { Location, Internation, Phone } from '@nutui/icons-react';
import { Rate } from '@nutui/nutui-react';

const ShopInfo = ({ shopInfo }) => {
    const [localShopInfo, setLocalShopInfo] = useState(null);

    // 保存店铺信息到本地存储
    const saveShopInfoToLocal = (data) => {
        localStorage.setItem('shopInfo', JSON.stringify(data));
    };

    // 从本地存储读取店铺信息
    const loadShopInfoFromLocal = () => {
        const saved = localStorage.getItem('shopInfo');
        return saved ? JSON.parse(saved) : null;
    };

    useEffect(() => {
        if (shopInfo) {
            // 如果有传入的shopInfo，保存到本地存储
            setLocalShopInfo(shopInfo);
            saveShopInfoToLocal(shopInfo);
        } else {
            // 如果没有传入shopInfo，从本地存储读取
            const localData = loadShopInfoFromLocal();
            if (localData) {
                setLocalShopInfo(localData);
            }
        }
    }, [shopInfo]);

    // 使用本地存储的数据，如果没有则使用传入的数据
    const displayShopInfo = localShopInfo || shopInfo;

    if (!displayShopInfo) {
        return <div>加载中...</div>;
    }

    return (
        <div className="shop-info-container">
            <span>{displayShopInfo.shopName}</span>
            <div className="score-container flex-space-between">
                <Rate value={3} size="normal" />
                <span>评分</span>
            </div>
            <div className="business-time-container flex-space-between">
                <span>营业中&nbsp;{displayShopInfo.shopStartTime}-{displayShopInfo.shopEndTime}</span>
                <span>信息/设施</span>
            </div>
            <div className="address-container flex-space-between">
                <div className="address-info flex-column">
                    <span>{displayShopInfo.shopAddress}</span>
                    <span>
                        <Internation width={12} height={12} />
                        &nbsp;距您步行1.4公里,需19分钟
                    </span>
                </div>
                <div className="address-icon flex-row">
                    <div
                        className="icon-item flex-column"
                        onClick={() => {
                            window.location.href = displayShopInfo.shopMobile;
                        }}
                    >
                        <Phone />
                        <span>电话</span>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ShopInfo;
